<template>
    <basic-container>
        <div class="paste-con" id="preview" v-on:paste="handlePaste">
            <span>粘贴图片到此处</span>
        </div>
        <ul class="el-upload-list el-upload-list--picture-card">
            <li class="el-upload-list__item is-success" v-for="item in imgList">
                <img class="el-upload-list__item-thumbnail" :src="item" alt="">
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </li>
        </ul>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </basic-container>
</template>

<script>
export default {
    data() {
        return {
            imgUrl: '',
            imgList:[]
        }
    },
    methods: {
        handlePaste(event) {
            const items = (event.clipboardData || window.clipboardData).items;
            let file = [];
            if (!items || items.length === 0) {
                this.$message.error("当前浏览器不支持本地");
                return;
            }
            // 搜索剪切板items
            for (let i = 0; i < items.length; i++) {
                if (items[i].type.indexOf("image") !== -1) {
                    file.push(items[i].getAsFile());
                }
            }
            if (!file) {
                this.$message.error("粘贴内容非图片");
                return;
            }
            // 此时file就是我们的剪切板中的图片对象
            // 如果需要预览，可以执行下面代码
            for (let i = 0; i < file.length; i++) {
                let reader = new FileReader();
                reader.readAsDataURL(file[i]);
                reader.onloadend = ()=> {
                    this.imgList.push(reader.result)
                }
            }    
            this.file = file;
        },
    }
};
</script>
<style lang="scss" scoped>
.paste-con {
    width: 300px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    text-align: center;
    padding-top: 80px;
    margin-bottom: 10px;
}
</style>